<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>现苹果菜单JS特效</title>
<meta name="Keywords" content="" />
<meta name="description" content="" />
<style>
body {margin:0;}
#demo {width:100%; position:absolute; bottom:0; text-align:center;}
</style>

<script src="js/Aui-core-1.42-min.js" language="javascript" type="text/javascript"></script>
<script>
Aui.ready(function(){
	var odoc = Aui( document ),
	oDiv = Aui( Aui.byID( "#demo" ) ),
	aImg = Aui( Aui.byTagName( "img" ) );	
	odoc.bind( "mousemove", function( e ){
		Aui.each( aImg, function(){
			var _this = Aui( this ),
			x = _this.left( true ) + _this.width()*0.5,
			y = _this.top( true ) + _this.height()*0.5,
			a = x - e.clientX,
			b = y - e.clientY,
			dis = 1 - ( Math.sqrt( Math.pow( a , 2) + Math.pow( b , 2) ) )/400;				
			if( dis < 0.5 ){
				dis = 0.5;
			};
			_this.setStyle("width", dis*128 );
		});
	});
});
</script>
</head>

<body>
<div id="demo">
    <img src="images/1.png" width="64" />
    <img src="images/2.png" width="64" />
    <img src="images/3.png" width="64" />
    <img src="images/4.png" width="64" />
    <img src="images/5.png" width="64" />
</div>
</body>
</html>
